<meta charset="UTF-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<link rel="stylesheet" href="/layui/css/layui.css" />

</head>
<style type="text/css">
.myData .layui-form-item {
	margin: 20px 100px 10px 45px;
}

.myData .layui-form-label {
	width: 85px;
}

.layui-input-block {
	margin-left: 120px;
}
</style>
<div class="layui-form">
	<form class="layui-form" name="updateRoleform" method="post" action="">
		<input name="uid" id="uid" hidden="true" th:value="${uid}" /> <input
			name="rid" id="rid" hidden="true" />

		<div class="layui-form-item">
			<div class="layui-form-item">
				<label class="layui-form-label">操作用戶</label>
				<div class="layui-input-inline">
					<input type="text" id="userName" readonly="readonly"
						class="layui-input" />
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">设置角色</label>
				<div class="layui-input-inline layui-form">
					<select name="rid" id="role" lay-verify="required"
						lay-filter="role">
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-block">
					<button type="button" onclick="updateRole()" class="layui-btn">立即提交</button>

				</div>
			</div>
		</div>
	</form>
</div>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>

<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script th:inline="javascript">
 var uName = [[${user.username}]]
 $('#userName').val(uName);
  var uid = [[${uid}]]
 $('#uid').val(uid);
var rid=[[${roleId}]]
 layui.use(['element', 'layer','form'], function () {
    var element = layui.element,
        form = layui.form,
        layer = layui.layer;
   $.get("/role/findAll",{},function (data) {
            var list = data.data;
            var select = document.getElementById('role');
            if (list != null || list.size() > 0) {
               for (var c in list) {
                   var option = document.createElement("option");
                   option.setAttribute("value", list[c].id);
                   option.innerText = list[c].notes;
                   select.appendChild(option)
               }
            };
             if(rid!=null){
        
        $("#role option[value="+rid+"]").attr('selected','selected');
        }
            form.render('select');
            
        },"json");
        
        form.on('select(role)', function(data) {
               $("#rid").attr("value",data.value)
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值]
                console.log(data.elem[data.elem.selectedIndex].text); //得到select选中值的文本内容
//              console.log(data.othis); //得到美化后的DOM对象
            });
     
}); 

   function updateRole(){  
  var uuid =$("#uid").val(); 
  var rrid =$("#rid").val(); 
  
                $.ajax({
                    type:"post",
                    url:"/role/setRole",
                    data:{uid: uuid, rid:rrid},//表单数据
                    success:function(d){
                    console.log(d);
                        if(d=="success"){
                              /* layer.msg("更新成功！"); */
				    		 //当你在iframe页面关闭自身时
	 	         		    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	              			  //layer信息提示
	              		 layer.msg('设置成功');//下面是关键代码
	              		 
		 	           	 setTimeout(function () { parent.layer.close(index) },300);//延迟
		 	              
                        }
                        else{
                            layer.msg('保存异常!');
                        }
                        
						setTimeout(function (){
						 
							 window.parent.location.reload();
						}, 500);
                    }
                })
    }
    
</script>
</html>